<script setup lang="ts">
import {onMounted, ref} from 'vue'
import {useRouter} from "vue-router";
import {getFriendDetail} from "@/api/relation.ts";
//这个详情界面
// 联系人数据
const router = useRouter()
const contact = ref<any>({
  gender: '',
  avatar: '',
  username: '',
  wechatNumber: '',
  region: '',
  phone: '',
  videoAccount: ''
})

onMounted(async () => {
  const id = router.currentRoute.value.query.id as string
  console.log("获取到的好友ID：", id);
  if (id) {
    try {
      const res = await getFriendDetail(Number(id)) // 根据ID请求详情
      if (res.data.code === 200) {
        contact.value = res.data.data
      } else {
        alert(`获取失败：${res.data.msg}`)
      }
    } catch (error: any) {
      const errMsg = error.response?.data?.msg || error.message
      console.error('详情加载失败：', errMsg)
      alert(`加载失败：${errMsg}`)
    }
  }
})

// 交互方法
const onBack = () => router.back()  //返回键
const onMore = () => router.push('') //更多信息
const onMoment = () => {
  const userId = contact.value.id; // 获取当前好友的ID
  if (userId) {
    router.push({
      path: '/userMoments', // 朋友圈页面的路由路径
      query: { userId: userId.toString() } // 参数friendId
    });
  } else {
    alert('好友ID获取失败，请重试');
  }
}

//发消息
const onChat = () => {
  const friendId = contact.value.id; // 获取当前好友的ID
  if (friendId) {
    router.push({
      path: 'ChatDetail', // 聊天页面的路由路径
      query: { friendId: friendId.toString()} // 参数friendId
    });
  } else {
    alert('好友ID获取失败，请重试');
  }
}

//视频电话
const onCall = () => {
  const friendId = contact.value.id; // 获取当前好友的ID
  if (friendId) {
    router.push({
      name: 'VideoChat',
      query: { role: 'caller',targetUserId: friendId.toString() } // 参数friendId
    });
  } else {
    alert('好友ID获取失败，请重试');
  }
}

</script>

<template>
  <div class="contact-detail-page">
    <!-- 顶部导航栏 -->
    <header class="header">
      <div class="back-btn" @click="onBack">
        <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
        </svg>
      </div>
      <div class="header-title"></div>
      <div class="more-btn" @click="onMore">
        <svg t="1755661325805" class="icon" viewBox="0 0 1024 1024"  xmlns="http://www.w3.org/2000/svg" p-id="1247" width="200" height="200"><path d="M277.333333 512a64 64 0 1 1-128 0 64 64 0 0 1 128 0zM576 512a64 64 0 1 1-128 0 64 64 0 0 1 128 0zM810.666667 576a64 64 0 1 0 0-128 64 64 0 0 0 0 128z" fill="#000000" p-id="1248"></path></svg>
      </div>
    </header>

    <!--  基本信息区 -->
    <div class="profile-section">
      <div class="avatar-container">
        <img :src="contact.avatar" alt="头像" class="avatar" />
      </div>
      <div class="info-container">
        <div class="name-row">
          <span class="name">{{ contact.username }}</span>

          <span class="star-icon">
            <svg t="1755661722709" class="icon" viewBox="0 0 1024 1024"  xmlns="http://www.w3.org/2000/svg" p-id="8399" width="200" height="200"><path d="M511.42 68.267c-117.863 0-193.792 49.698-230.161 133.512-23.262 53.624-27.307 110.387-21.897 163.874l0.683 5.769c6.52 50.483 32.153 110.763 68.864 154.556l2.116 2.474-187.153 157.065a68.267 68.267 0 0 0-24.405 52.275v149.675a68.267 68.267 0 0 0 68.266 68.266h648.534a68.267 68.267 0 0 0 68.266-68.266V737.843l-0.12-4.028a68.267 68.267 0 0 0-24.404-48.384L694.955 531.012l2.85-3.123c38.178-43.486 62.464-101.7 70.485-161.126 7.236-53.931 2.168-116.532-23.518-170.701C706.56 115.422 629.3 68.267 511.42 68.267z m0 68.266c91.92 0 144.947 32.359 171.673 88.747 19.115 40.363 23.177 90.385 17.528 132.386-7.902 58.76-36.147 115.763-77.944 147.541a34.133 34.133 0 0 0-1.211 53.385l214.8 179.268v149.607H187.734V737.809l216.064-181.282a34.133 34.133 0 0 0-0.887-53.01c-39.134-30.685-70.776-97.057-75.605-144.759-4.352-42.888-1.076-89.122 16.588-129.809 25.515-58.828 76.8-92.416 167.527-92.416z" :fill="contact.gender === '1' ? '#007aff' : '#ff2d55'" p-id="8400"></path><path d="M546.133 648.533V819.2h-68.266V648.533a34.133 34.133 0 1 1 68.266 0z" :fill="contact.gender === '1' ? '#007aff' : '#ff2d55'" p-id="8401"></path></svg>
          </span>
        </div>
        <div class="wechat-id">{{ contact.wechatNumber }}</div>
        <div class="region">{{ contact.region }}</div>
      </div>
    </div>

    <!-- 功能列表 -->
    <ul class="feature-list">
      <li class="feature-item" @click="">
        <span class="feature-label">朋友资料</span>
        <svg class="arrow-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
        </svg>
      </li>
      <li class="feature-item" @click="">
        <span class="feature-label">电话</span>
        <span class="feature-sub">{{ contact.phone }}</span>
        <svg class="arrow-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
        </svg>
      </li>
      <li class="feature-item" @click="">
        <span class="feature-label">朋友权限</span>
        <svg class="arrow-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
        </svg>
      </li>
      <li class="feature-item" @click="onMoment">
        <span class="feature-label">朋友圈</span>
        <svg class="arrow-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
        </svg>
      </li>
      <li class="feature-item" @click="onVideo">
        <span class="feature-label">视频号</span>
        <span class="feature-sub">{{ contact.videoAccount }}</span>
        <svg class="arrow-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
        </svg>
      </li>
    </ul>

    <!-- 操作按钮 -->
    <div class="action-buttons">
      <button class="action-btn chat-btn" @click="onChat">
        <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-4l-4 4z"/>
        </svg>
        发消息
      </button>
      <button class="action-btn call-btn" @click="onCall">
        <svg t="1755662015202" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9217" width="200" height="200"><path d="M725.333333 392.533333l222.421334-155.733333a21.333333 21.333333 0 0 1 33.578666 17.493333v515.413334a21.333333 21.333333 0 0 1-33.578666 17.493333L725.333333 631.466667V810.666667a42.666667 42.666667 0 0 1-42.666666 42.666666H85.333333a42.666667 42.666667 0 0 1-42.666666-42.666666V213.333333a42.666667 42.666667 0 0 1 42.666666-42.666666h597.333334a42.666667 42.666667 0 0 1 42.666666 42.666666v179.2z m0 134.784l170.666667 119.466667V377.173333l-170.666667 119.466667v30.634667zM128 256v512h512V256H128z m85.333333 85.333333h85.333334v85.333334H213.333333V341.333333z" p-id="9218" fill="#1296db"></path></svg>
        音视频通话
      </button>
    </div>
  </div>
</template>

<style scoped>
/* 页面容器：强制占满屏幕，避免滚动异常 */
.contact-detail-page {
  width: 100%;
  height: 100vh;
  background-color: #f7f7f7;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  display: flex;
  flex-direction: column;
}


.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 16px;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.back-btn, .more-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.icon {
  width: 22px;
  height: 22px;
  color: #333;
}

.header-title {
  flex: 1;
  text-align: center;
  font-size: 17px;
  font-weight: 600;
}

/* 头像区：垂直居中，严格间距 */
.profile-section {
  display: flex;
  align-items: center; /* 关键：让头像和信息垂直居中 */
  padding: 16px;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.avatar-container {
  width: 80px;
  height: 80px;
  margin-right: 16px;
  border-radius: 50%;
  overflow: hidden;
}

.avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.info-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.name-row {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.name {
  font-size: 20px;
  font-weight: 600;
  color: #333;
}

.star-icon {
  margin-left: 8px;
}

.star-icon .icon {
  color: #ffd700; /* 金色标星 */
}

.wechat-id, .region {
  font-size: 14px;
  color: #999;
  margin-bottom: 4px;
}

/* 功能列表：每项严格对齐，区分主副标题 */
.feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #fff;
  flex: 1; /* 占满中间空间，让操作按钮顶到底部 */
}

.feature-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 16px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  transition: background-color 0.2s;
}

.feature-item:last-child {
  border-bottom: none;
}

.feature-item:hover {
  background-color: #f5f5f5;
}

.feature-label {
  flex: 1; /* 主标签占满左侧空间 */
  font-size: 16px;
  color: #333;
}

.feature-sub {
  margin: 0 8px; /* 副标题与主标签、箭头保持间距 */
  font-size: 14px;
  color: #666;
}

.arrow-icon {
  color: #999;
  width: 20px;
  height: 20px;
}

/* 操作按钮：固定底部，宽屏适配 */
.action-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  background-color: #f7f7f7;
}

.action-btn {
  width: 100%;
  max-width: 320px;
  height: 48px;
  margin: 8px 0;
  padding: 0 16px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 24px;
  font-size: 16px;
  color: #333;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}

.action-btn:hover {
  background-color: #f5f5f5;
}

.action-btn .icon {
  margin-right: 8px;
}

.chat-btn .icon {
  color: #128ee9; /* 聊天图标蓝色 */
}

.call-btn .icon {
  color: #ff6633; /* 通话图标橙色 */
}
</style>